<script setup>
import { onMounted, ref } from "vue";
import { isWeChatBrowser } from '@/utils/auth'

const isShow = ref(false)



function clickFn() {
    // isShow.value = false
}


onMounted(() => {
    if (isWeChatBrowser()) {
        isShow.value = true
    }
})
</script>

<template>
    <div class='guide_cop' v-if="isShow" @click="clickFn">
        <img src="../assets/imgs/solid.png" class="solidImg" alt="">
        <div class="text_box">
            <div class="top">
                点击右上角
                <img src="../assets/imgs/round.png" class="roundImg" alt="">
            </div>
            <div class="bottom">
                选择在浏览器中打开
                <img src="../assets/imgs/browser.png" class="browserImg" alt="">
            </div>
        </div>
        <div class="footer">
            <img src="../assets/imgs/share.png" class="shareImg" alt="">
            <img src="../assets/imgs/browser.png" class="browserImg" alt="">
        </div>
    </div>
</template>

<style lang='scss' scoped>
.guide_cop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);

    .text_box {
        font-size: 21px;
        color: #FFFFFF;
        position: absolute;
        top: 100px;
        left: 50%;
        width: 100%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: center;

        .top {
            display: flex;
            align-items: center;
        }

        .bottom {
            font-size: 21px;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            gap: 9px;

            .browserImg {
                width: 36px;
                height: 36px;
                border-radius: 50%;
            }
        }
    }

    .roundImg {
        width: 65px;
        height: 65px;
    }

    .solidImg {
        position: absolute;
        top: 70px;
        right: 25px;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 118px;
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: -10px;
        width: 100%;

        .shareImg {
            width: 100%;
        }

        .browserImg {
            width: 65px;
            height: 65px;
            position: absolute;
            right: 122px;
            bottom: 195px;
        }
    }
}
</style>